<template>

    <div class="payment-card">

        <button @click="doPaying()">Credit or Debit card</button>

        <UxDialog :visible="true" :can-close="false" v-show="!!dialog" class="payment-card-dialog">

            <div class="order-payment-close" @click="onClose()"><svg-icon name="dialog-close-medium" /></div>

            <!-- 输入支付信息 -->
            <div class="order-payment-input" v-show="dialog && dialog.substatus == 'input'" v-loading="dialog && dialog.loading">
                <h2>Pay with card</h2>

                <div class="payment-card-scroller">
                    <div class="card-code" :ready="ready">
                        <h3>
                            <span>Payment card</span>
                            <img src="https://img.podpartner.com/static/images-20230202/payment/card-supported.png" alt="">
                        </h3>
                        <iframe ref="oceanpayment" v-if="dialog" @load="iframeLoad" :src="domain + '/gateway/direct/checkpage'" frameborder="0" seamless></iframe>
                        <UxLoading />
                    </div>

                    <!-- 账单地址 -->
                    <OrderPaymentCardBilling v-if="dialog" v-model="address" @validate="forbiden = !!$event" :option="option" />

                </div>

                <div class="card-footer">
                    <button type="primary" @click="paynow()" :disabled="forbiden">
                        <svg-icon name="payment-safety" />
                        <span>Pay now</span>
                    </button>
                    <span><img src="https://img.podpartner.com/static/images-20230202/payment/card-safe.png">Your payment information is securely encrypted with 128-bit SSL.</span>
                </div>
            </div>

            <!-- 请求超时 -->
            <div class="order-payment-timeout" v-show="dialog && dialog.substatus == 'timeout'">
                <figure>
                    <img src="https://img.podpartner.com/static/images-20230202/payment/order-payment-network.png" alt="">
                    <strong>The connection has timed out.</strong>
                </figure>
                <button type="primary" @click="paynow()">Try again</button>
            </div>

            <!-- 跳转前弹窗 -->
            <div class="order-payment-jumpto" v-show="dialog && dialog.substatus == 'jumpto'">
                <figure>
                    <img src="https://img.podpartner.com/static/images-20230202/payment/order-payment-jumpto.png" alt="">
                    <strong>Password verification is required by your bank.</strong>
                </figure>
                <button type="primary" @click="dialog && dialog.verify()">Verify</button>
            </div>

            <!-- 支付失败 -->
            <div class="order-payment-failure" v-show="dialog && dialog.substatus == 'failure'">
                <figure>
                    <img src="https://img.podpartner.com/static/images-20230202/payment/order-payment-failure.png" alt="">
                    <strong>Payment failed</strong>
                    <span v-text="dialog && dialog.error"></span>
                </figure>
                <button type="primary" @click="onClose()">OK</button>
            </div>

            <!-- 轮询中 -->
            <div class="order-payment-polling" v-show="dialog && dialog.substatus == 'polling'">
                <figure><img src="https://img.podpartner.com/static/images-20230202/order-paying.png"></figure>
                <h4><img src="@/assets/images/pay-loading.gif" alt="" /></h4>
                <p>Paying, please wait patiently</p>
            </div>

            <!-- 检查订单支付状态 -->
            <div class="order-payment-pending" v-show="dialog && dialog.substatus == 'pending'">
                <figure><img src="https://img.podpartner.com/static/images-20230202/order-pending.png"></figure>
                <h4><img src="@/assets/images/pay-pending.gif" alt="" /></h4>
                <p>Payment is being processed. Please do not pay again.</p>
            </div>

        </UxDialog>
    </div>

</template>
<script>
import { mapGetters, mapState } from "vuex";
import PaymentUtils from '@/utils/PaymentUtils.js';
import { oceanCounty } from '@/utils/ocean-county.js';

export default {
    name: "OrderPaymentCard",
    props: ["option"],
    data () {
        return {
            // domain: "https://secure.oceanpayment.com", // 沙箱环境
            // domain: "https://test-secure.oceanpayment.com",
            domain: process.env.NODE_ENV == 'production' ? "https://secure.oceanpayment.com" : "https://test-secure.oceanpayment.com",
            dialog: null, // input|timeout|jumpto|polling|failure
            ready: false,
            forbiden: true,

            // addressRules: rules,
            address: {
                first_name: '', // string 姓名
                last_name: '', // 名
                country_code: '', // string 国家（国际二字码 标准ISO 3166-2 ）
                country: '', // string 国家名称
                city: '', // string 城市
                state: '', // string  州/省
                district: '', // string 区、县（可对应为adress 2）
                street: '', // string 街道/详细地址（可对应为adress 1）
                email: '', // string 邮箱
                phone: '', // string 电话
                post_code: '', // string 邮编
            }

        };
    },

    computed: {
        ...mapGetters("user", {
            userInfo: "getUserInfo",
        }),

        // 是否禁用
        // payForbiden () {

        //     // 判断地址信息
        //     const address = this.address || {};
        //     const forbid = [];

        //     Object.keys(address).map((key) => {
        //         const value = address[key];
        //         const rule = rules[key] || [];
        //         const error = rule.filter((item) => {
        //             const cancel = []
        //             // 为空验证
        //             if (item.required) {
        //                 !value && cancel.push('Must be fill in')
        //             }

        //             if (item.validator) {
        //                 item.validator(item, value, (res) => res && cancel.push(res))
        //             }
        //             return cancel.length > 0
        //         });
        //         if (error.length > 0) {
        //             forbid.push({ name: key, error: error });
        //         }
        //     });

        //     console.log(this.address, forbid)

        //     return forbid.length > 0
        // },
    },

    methods: {

        // 关闭对话框
        onClose () {
            if (!this.dialog) {
                // 没有对话框
            } else if (this.dialog.substatus == 'input') {

                this.dialog.onMessage && window.removeEventListener('message', this.dialog.onMessage)
                this.dialog = null;
                this.$emit('statusChange', {
                    payment: 'card',
                    action: 'cancel',
                    substatus: 'input',
                    message: 'Close paying windows'
                })
            } else {
                // 如果是支付失败,则返回到当前
                window.removeEventListener('message', this.dialog.onMessage)
                this.popupClose();
                this.dialog.substatus = 'input';
                this.dialog.loading = false;
            }

        },

        // 加载成功，设置样式
        iframeLoad (event) {
            const iframe = this.$refs['oceanpayment'];

            // 转成base64
            // https://base64.guru/converter/encode/css
            // body,#sub-frame-error{background:none}
            const css = 'data:text/css;base64,Ym9keSwjc3ViLWZyYW1lLWVycm9ye2JhY2tncm91bmQ6bm9uZX0='
            const option = { 'methodType': 'init', 'cssUrl': css, 'language': undefined }
            iframe && iframe.contentWindow.postMessage(option, this.domain);
            this.ready = true;
        },


        // 01.打开支付弹窗
        doPaying () {

            const dialog = {
                substatus: 'input', // input|timeout|jumpto|polling|pending|failure
                loading: false,
                error: '',
                verify: null, // 二次验证
                popup: null,
                callback: (option, ocean) => {

                    // const payment_details = option.payment_details || 'Credit Card pay failed'
                    // 如果失败，就直接提示失败
                    if (ocean.payment_status === '0') {
                        const message = ocean.payment_details || 'Credit Card pay failed';
                        this.dialog.substatus = 'failure'
                        this.dialog.error = message.replace(/^\d*?\:/, '')

                    } else if (this.option.action == 'recharge') {
                        // 充值，则直接轮询
                        this.dialog.polldate = option.order_number;
                        this.dialog.substatus = 'polling'
                        this.payPolling()

                    } else {
                        // 如果成功，先调用接口检查一下
                        // 请求后台，检查支付状态是否一至
                        const request = {
                            order_number: option.order_number || '',
                            payment_id: ocean.payment_id || '',
                            payment_status: ocean.payment_status || '',
                        }

                        this.$http('Order.setCardCheckout', request).then(response => {
                            if (!this.dialog) {
                                // 没有对话框了
                            } else if (response.code === 0 && response.data && response.data.order_state == 2) {
                                // 已支付
                                this.dialog = null;
                                this.$emit('statusChange', {
                                    payment: 'card',
                                    action: 'success',
                                })
                            } else {
                                // 没有请求结果，或是其他状态，可以认为是pending
                                this.dialog.substatus = 'polling'
                                this.payPolling()
                            }
                        })
                    }

                },
            }

            // 设置父级状态
            const setParentStatus = (status) => {
                const parent = this.$parent.$parent;
                if (parent) {
                    parent.status = status
                }
            }

            // 清空支付数据
            Object.keys(this.address).map(key => this.address[key] = '')
            this.$emit('statusChange', {
                payment: 'card',
                action: 'before',
                callback: res => {
                    if (!res) {
                        // 出错了
                    } else if (this.option.action == 'single') {
                        // 当订单支付时
                        // 检查库存
                        const obj = { paypal: 1, card: 2, payoneer: 3, wallet: 4 };
                        const req = { payment: obj[this.option.payment] }

                        // 保持loading状态
                        setParentStatus('before')
                        this.$http('Order.checkStocksByCard/' + this.option.codes, req).then(response => {

                            if (response.code !== 0) {

                                // 接口异常
                                this.$emit('statusChange', {
                                    payment: 'card',
                                    action: 'failure',
                                    message: response.msg || ''
                                })

                            } else if (response.data && response.data.state == 1) {
                                // 库存不足
                                this.$emit('statusChange', {
                                    payment: 'card',
                                    action: 'stock',
                                    stocks: response.data.list || [],
                                    message: response.msg
                                })

                            } else {
                                setParentStatus('paying')
                                this.dialog = dialog
                                this.ready = false;
                            }
                        })

                    } else {
                        // 批量支付或充值
                        this.dialog = dialog
                        this.ready = false;
                    }
                }
            })
        },
        // 获取名称
        getUserName (name) {
            const split = name.split(/\s+/).filter(i => i)
            if (split.length > 1) {
                return {
                    first_name: split.slice(0, split.length - 1).join(' '),
                    last_name: split[split.length - 1]
                }
            } else {
                return {
                    first_name: name,
                    last_name: name
                }
            }
        },


        getSubstring (list, length) {
            return list.join(',').substring(0, length)
        },


        // 02.开始支付
        paynow () {

            const user = this.userInfo || {}
            const user_name = this.getUserName(this.address.first_name || user.name || user.email)

            // 是否是充值
            const action = this.option.action;
            // 产品列表
            const request = {
                type: action == 'recharge' ? 1 : action == 'batch' ? 2 : 0, // 0：订单支付，1：钱包充值
                order_amount: this.option.amount, // 交易金额
                order_currency: 'USD', // 交易币种
                order_number: this.option.codes || '', // 网站订单号
                billing_first_name: user_name.first_name || 'N/A', // 消费者姓
                billing_last_name: user_name.last_name || 'N/A', // 消费者名
                billing_email: this.address.email || user.email, // 消费者邮箱
            }

            const product = {
                name: [], // 产品名称
                num: [], // 数量
                sku: [], // SKU
                price: [], // 单价
            };

            (this.option.product || []).map(item => {
                product.name.push(item.name || '')
                product.num.push(item.count || '')
                product.sku.push(item.sku || '')
                product.price.push((item.price / 100))
            })

            // ，对特殊字符(‘“ < >)进行
            Object.keys(request).map(key => {
                if (typeof request[key] == 'string') {
                    // 去首尾空格
                    request[key] = request[key].replace(/^\s+|\s+$/g, '')

                    // 转译特殊符号
                    request[key] = request[key].replace(/[<>'"]/gi, '-')
                }
            })




            this.dialog.loading = true;
            this.dialog.substatus = 'input'
            this.$http('Order.getCardSign', request).then(response => {
                if (response.code === 0) {
                    return Promise.resolve(response.data || {})
                } else if (response.code == 4009) {
                    // 订单异常,订单状态有问题，要刷新订单
                    this.dialog = null;
                    this.$emit('statusChange', {
                        payment: 'card',
                        action: 'reload',
                        message: response.msg
                    })

                } else {
                    return Promise.reject(response.msg || "Credit Card pay failed")
                }
            }).then(sign => {

                // 提交请求
                const iframe = this.$refs['oceanpayment'];


                const option = {
                    // account: '995345', // 帐户号
                    // terminal: '99534501', // 终端号
                    account: sign.account, // 帐户号
                    terminal: sign.terminal, // 终端号
                    signValue: sign.sign_value, // signValue
                    key: sign.key, // Key-公钥
                    backUrl: location.origin + '/app/oceanpay?' + new Date().getTime(), // 返回地址
                    noticeUrl: sign.notice_url, // 通知url
                    methods: 'Credit Card', // 支付方式，固定值
                    // ET_NOTES: this.option.action == 'recharge' ? '账户充值' : '订单支付', // ET_NOTES 订单支付 账户充值
                    // 充值干掉
                    ET_NOTES: sign.et_note || '订单支付', // ET_NOTES 订单支付 账户充值

                    order_number: sign.order_number, // 网站订单号
                    order_currency: request.order_currency, // 交易币种
                    order_amount: (request.order_amount / 100).toFixed(2), // 交易金额


                    billing_firstName: request.billing_first_name, // 消费者姓
                    billing_lastName: request.billing_last_name, // 消费者名
                    billing_email: request.billing_email || user.email || user.contact_email || 'N/A', // 消费者邮箱
                    billing_country: this.address.country_code || 'N/A', // 消费者国家
                    billing_state: this.address.state || 'N/A', // 消费者州/省
                    billing_city: this.address.city || 'N/A', // 消费者城市
                    billing_address: this.address.street || 'N/A', // 消费者地址
                    billing_zip: this.address.post_code || 'N/A', // 消费者邮编
                    billing_ip: sign.billing_ip || '0.0.0.0', // 消费者IP
                    billing_phone: this.address.phone || 'N/A', // 消费者电话

                    ship_firstName: 'N/A', // 收货人的名 string length 0-50
                    ship_lastName: 'N/A', // 收货人的姓 string length 0-50
                    ship_email: 'N/A', // 收货人邮箱 string length 0-50
                    ship_phone: 'N/A', // 收货人的电话 string length 0-50
                    ship_country: 'N/A', // 收货人的国家 string length 0-100
                    ship_state: 'N/A', // 收货人的州（省、郡）如果国家为US或CN时，必须按照标准格式，请参考：州代码；除US,CN外，如果网站没有该值时可传：N/A  string length 0-100
                    ship_city: 'N/A', // 收货人的城市 string length 0-100
                    ship_addr: 'N/A', // 收货人的详细地址 string length 0-500
                    ship_zip: 'N/A', // 收货人的邮编 string length 0-50

                    productName: sign.product_name || this.getSubstring(product.name, 500), // 产品名称
                    productNum: sign.product_num || this.getSubstring(product.num, 50), // 数量
                    productSku: sign.product_sku || this.getSubstring(product.sku, 500), // SKU
                    productPrice: sign.product_price || this.getSubstring(product.price, 500), // 单价
                }



                if (action == 'recharge') {
                    // 充值
                    // option.productName = 'wallet'
                    option.productName = option.productName || 'clothes'
                    option.productNum = 1;
                    option.productSku = option.order_number
                    option.productPrice = option.order_amount;

                    // 充值也要名称
                    option.ship_firstName = option.billing_firstName || 'N/A';
                    option.ship_lastName = option.billing_lastName || 'N/A';
                    option.ship_email = option.billing_email || 'N/A';
                    option.ship_phone = option.billing_phone || 'N/A';
                    option.ship_country = option.billing_country || 'N/A';
                    option.ship_state = option.billing_state || 'N/A';
                    option.ship_city = option.billing_city || 'N/A';
                    option.ship_addr = option.billing_address || 'N/A';
                    option.ship_zip = option.billing_zip || 'N/A';

                } else if (action == 'batch') {
                    // 批量支付使用账单地址
                    option.ship_firstName = option.billing_firstName || 'N/A';
                    option.ship_lastName = option.billing_lastName || 'N/A';
                    option.ship_email = option.billing_email || 'N/A';
                    option.ship_phone = option.billing_phone || 'N/A';
                    option.ship_country = option.billing_country || 'N/A';
                    option.ship_state = option.billing_state || 'N/A';
                    option.ship_city = option.billing_city || 'N/A';
                    option.ship_addr = option.billing_address || 'N/A';
                    option.ship_zip = option.billing_zip || 'N/A';

                } else if (this.option.shipping) {

                    // 非充值，且有收货地址
                    const shipping = this.option.shipping;
                    const user_name = this.getUserName(shipping.first_name)
                    option.ship_firstName = user_name.first_name || 'N/A';
                    option.ship_lastName = user_name.last_name || 'N/A';
                    option.ship_email = shipping.email || 'N/A';
                    option.ship_phone = shipping.phone || 'N/A';
                    option.ship_country = shipping.country_code || 'N/A';
                    option.ship_state = shipping.state || 'N/A';
                    option.ship_city = shipping.city || 'N/A';
                    option.ship_addr = shipping.street || 'N/A';
                    option.ship_zip = shipping.post_code || 'N/A';
                }


                // 替换国家码和洲
                const country_billing = oceanCounty.filter(i => i.country == option.billing_country);
                const country_ship = oceanCounty.filter(i => i.country == option.ship_country);

                if (country_billing.length > 0) {
                    const billing_state = (option.billing_state || '').toLowerCase()
                    country_billing.map(item => item.state.toLowerCase() == billing_state && (option.billing_state = item.code))
                }

                if (country_ship.length > 0) {
                    const ship_state = (option.ship_state || '').toLowerCase()
                    country_ship.map(item => item.state.toLowerCase() == ship_state && (option.ship_state = item.code))
                }


                //iframe网页IP:PORT
                iframe && iframe.contentWindow.postMessage(option, this.domain);
                this.addMessageListener((ocean) => {

                    // const option = this.$oceanCallbackFormat(msg) || {}
                    const payment_status = ocean.payment_status || '';
                    const pay_url = ocean.pay_url || '';

                    if (ocean.code === -1) {
                        // 参数异常
                        // 参数检验失败
                        this.$uxMessage.error('nvalid bank account details. Please verify the details and try again.');
                        this.dialog.loading = false;
                    } else if (ocean.code === 500) {
                        // 超时了
                        this.dialog.substatus = 'timeout';
                        this.dialog.loading = false;
                    } else if (payment_status == '-1' && pay_url) {
                        // -1:待处理（当pay_url字段不为空时，3D交易返回待处理）
                        // 下一个流程：点击跳转
                        // 二次验证
                        this.dialog && this.secondVerify(option, pay_url)
                    } else {
                        // 其他状态状态，支付成功或失败
                        this.dialog && this.dialog.callback(option, ocean)

                    }

                }, 60000)

            }).catch(error => {
                // 失败，都认为是超时
                if (this.dialog) {
                    this.dialog.loading = false;
                    this.dialog.substatus = 'failure';
                    this.dialog.error = error;
                }
            })
        },

        // 二次验证
        secondVerify (option, pay_url) {

            this.dialog.substatus = 'jumpto'
            this.dialog.loading = false;
            this.dialog.popup = null;
            this.dialog.verify = () => {
                this.dialog.popup = window.open(pay_url, "_blank");
                this.dialog.substatus = 'polling'
                this.popupListener();
                this.addMessageListener((ocean) => this.dialog && this.dialog.callback(option, ocean))
            }
        },

        // 轮询订单状态
        payPolling () {

            const option = {
                payby: 'card',
                action: this.option.action,
                payment: this.option.payment,
                codes: this.option.codes,
                polldate: this.dialog.polldate,
            }

            const allow = this.dialog && /polling|pending/.test(this.dialog.substatus)

            // 有dialog才轮询
            allow && PaymentUtils.checkPaymentStatus(option).then(info => {

                // 成功
                if (!this.dialog) {
                    // 没有弹窗，不管了
                } else if (info.status == 'success') {
                    // 成功
                    this.dialog = null;
                    this.$emit('statusChange', {
                        payment: 'card',
                        action: 'success',
                    })
                } else if (info.status == 'failure') {
                    this.dialog.substatus = 'failure'
                    this.dialog.error = info.message

                } else if (/polling|pending/.test(info.status)) {
                    // 支付中
                    this.dialog.substatus = info.status
                    setTimeout(this.payPolling, 2000);
                }

            }).catch(info => {
                // 失败，网络请求等失败
                this.dialog && setTimeout(this.payPolling, 2000);
            })
        },

        // 关闭新窗口
        popupClose () {
            setTimeout(() => {
                if (this.dialog && this.dialog.popup) {
                    try {
                        this.dialog.popup.close();
                        this.dialog.popup = null;
                    } catch (error) {
                        console.log(error)
                    }
                }
            }, 10);
        },
        // 监听新窗口
        popupListener () {
            if (!this.dialog || !this.dialog.popup) {
                // 没有了，不用管了
            } else if (this.dialog.closed) {
                // 关闭了
                this.popupClose();
            } else {
                // 轮询
                !this._isDestroyed && setTimeout(this.popupListener, 200);
            }
        },

        // 添加监听
        addMessageListener (callback, timeout) {

            const timer = {
                overtime: new Date().getTime() + timeout,
                status: 'loading',
            }
            const getTimeout = () => {
                if (timer.status != 'loading') {
                    // 不是加载中的，不管了
                } else if (new Date().getTime() - timer.overtime < 0) {
                    setTimeout(getTimeout, 300)
                } else {
                    // 超时
                    timer.status = 'timeout'

                    if (this.dialog && this.dialog.onMessage) {
                        window.removeEventListener('message', this.dialog.onMessage)
                        this.dialog.onMessage = null;
                    }

                    if (!timer.finish && callback) {
                        timer.finish = true;
                        callback({ code: 500 })
                    }

                }
            }

            this.dialog.onMessage && window.removeEventListener('message', this.dialog.onMessage)
            this.dialog.onMessage = (event) => {

                let allow = event.origin == this.domain || event.origin == location.origin


                if (!allow) {
                    // 不可用域名
                } else if ((event.data || {}).target == 'metamask-inpage') {
                    // 小冰电脑上的问题，这时不管他
                } else {
                    window.removeEventListener('message', this.dialog.onMessage)
                    this.dialog && (this.dialog.onMessage = null)

                    if (timer.status == 'loading') {
                        timer.status = 'ready'
                        const ocean = this.$oceanCallbackFormat(event.data || '') || {}

                        if (!timer.finish && callback) {
                            timer.finish = true;
                            callback(ocean)
                        }
                    }

                }
            }

            timeout && getTimeout()
            window.addEventListener('message', this.dialog.onMessage)
        },
    },
    created () {
    },
    beforeDestroy () {
        this.dialog = null;
    },
}
</script>
<style lang="scss" scoped>
.payment-card {
    & > button {
        width: 100%;
        height: 48px;
        border-radius: 8px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s;
        border: none;
        font-size: 16px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        line-height: 18px;
        color: #fff;
        background: #000;

        &:hover {
            // background: #ffa600;
            opacity: 0.6;
        }
    }

    &[disabled] button {
        user-select: none;
        background: #d8d8d8;
        color: #ffffff;
        pointer-events: none;
    }
}
.dialog-layout::v-deep {
    & > .dialog-content > h6 {
        display: none;
    }
    & > .dialog-content > .dialog-body {
        position: relative;
        overflow: hidden;
        display: flex;
        font-family: Roboto-Regular, Roboto;
    }
}

.order-payment-close {
    z-index: 1;
    position: absolute;
    right: 4px;
    top: 4px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
    transition: all 0.3s;
    cursor: pointer;
    border-radius: 4px;
    svg {
        width: 10px;
        height: 10px;
    }
    &:hover {
        background-color: rgba(255, 0, 0, 0.1);
        color: #8c1c14;
    }
}

.order-payment-input {
    max-width: 616px;
    max-height: 620px;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    & > h2 {
        font-size: 20px;
        font-weight: bold;
        color: #000000;
        line-height: 24px;
        text-align: center;
        padding: 12px 0;
    }

    .payment-card-scroller {
        flex: 1;
        overflow: auto;
        padding: 0 32px 10px;
    }

    .card-code {
        background: #f6f6f6;
        border-radius: 12px;
        border: 1px solid #f0f0f0;
        overflow: hidden;
        display: flex;
        flex-wrap: wrap;
        position: relative;

        & > h3 {
            visibility: hidden;
            width: 100%;
            height: 32px;
            padding: 34px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            &::before {
                content: '';
                display: inline-block;
                width: 32px;
                height: 32px;
                background-image: url(https://img.podpartner.com/static/images-20230202/payment/card.png);
                background-size: 100% 100%;
            }

            span {
                margin-left: 8px;
                font-size: 14px;
                font-weight: 400;
                color: #555555;
                line-height: 16px;
                flex: 1;
            }

            img {
                width: 300px;
                height: 24px;
            }
        }

        & > iframe {
            visibility: hidden;
            width: 100%;
            height: 160px;
        }

        & > .loading {
            background: none;
        }

        &[ready='true'] {
            & > .loading {
                display: none;
            }
            & > h3,
            & > iframe {
                visibility: visible;
            }
        }
    }

    .card-footer {
        display: flex;
        flex-direction: column;
        align-items: center;
        border-top: 1px solid #ebebeb;
        button {
            width: 420px;
            height: 44px;
            margin: 18px auto;
            padding: 0;
            svg {
                width: 20px;
                height: 20px;
                vertical-align: top;
            }
        }

        & > span {
            width: 100%;
            box-sizing: border-box;
            padding: 7px 0;
            background: #f4faf4;
            line-height: 18px;
            text-align: center;
            font-size: 12px;
            font-weight: 400;
            color: #4b995a;
            border-radius: 0 0 10px 10px;

            img {
                width: 18px;
                height: 18px;
                vertical-align: top;
                margin-right: 4px;
            }
        }
    }

    &::v-deep > .el-loading-mask {
        pointer-events: all !important;
        z-index: 1 !important;
    }
}

.order-payment-jumpto,
.order-payment-timeout,
.order-payment-failure {
    width: 320px;
    height: 414px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;

    & > figure {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        img {
            width: 80px;
            height: 80px;
        }

        strong {
            margin: 16px 20px 0;
            font-size: 18px;
            color: #000000;
            line-height: 28px;
            text-align: center;
        }
        span {
            margin: 8px 20px;
            font-size: 14px;
            color: #555555;
            line-height: 18px;
            text-align: center;
            white-space: pre-wrap;
        }
    }

    & > button {
        height: 38px;
        line-height: 36px;
        width: 280px;
        margin-bottom: 30px;
        font-size: 14px;
    }
}

.order-payment-polling,
.order-payment-pending {
    width: 320px;
    height: 414px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    & > figure {
        width: 66px;
        height: 66px;
        img {
            width: 100%;
            height: 100%;
        }
    }
    & > h4 {
        height: 8px;
        margin-top: 16px;
        img {
            width: 40px;
            height: 8px;
        }
    }
    & > p {
        margin: 26px 20px 0;
        font-size: 20px;
        font-weight: bold;
        color: #000000;
        line-height: 24px;
        text-align: center;
    }
}
</style>
